<template>
  <div class="feedback-page" :style="{ height }">
    <div class="feedback-page-main">
      <i class="iconfont iconfont icon-check-double-line"></i>
      <div class="title">{{ title }}</div>
      <div class="info">{{ info }}</div>
      <p class="info">{{ subInfo }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    height: {
      type: String,
      default: '100vh'
    },
    title: {
      type: String,
      default: '操作成功'
    },
    info: {
      type: String,
      default: ''
    },
    subInfo: {
      type: String,
      default: ''
    }
  })
</script>

<style lang="less" scoped>
  .feedback-page {
    .fc();

    .feedback-page-main {
      flex-direction: column;
      .fc();

      > .iconfont {
        font-size: 88px;
        text-align: center;
        color: @success;
      }

      .title {
        text-align: center;
        color: @text01;
        .font20b();
      }

      .info {
        margin: 16px 0 4px;
        text-align: center;
        color: @text03;
        .font16();
      }
    }
  }
</style>
